<template>
  <div class="test-highlight">
    <h2>高亮功能测试页面</h2>
    <div class="search-box">
      <input 
        v-model="searchKeyword" 
        placeholder="输入搜索关键词" 
        @input="onSearchInput"
      />
    </div>
    
    <div class="test-content">
      <h3>测试文本：</h3>
      <p v-html="highlightedText"></p>
    </div>
    
    <div class="product-list">
      <h3>商品列表测试：</h3>
      <div 
        v-for="product in testProducts" 
        :key="product.id" 
        class="product-item"
      >
        <div class="product-name" v-html="highlightKeyword(product.name)"></div>
        <div class="product-desc" v-html="highlightKeyword(product.description)"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TestHighlight',
  data() {
    return {
      searchKeyword: '',
      testText: '这是一个测试文本，用来验证搜索关键字高亮功能是否正常工作。在这个文本中，我们可以搜索任何关键词并查看高亮效果。',
      testProducts: [
        {
          id: 1,
          name: '苹果手机 iPhone 12',
          description: '苹果公司最新款智能手机，拥有强大的A14芯片和超清摄像头'
        },
        {
          id: 2,
          name: '华为手机 Mate 40',
          description: '华为旗舰手机，搭载麒麟9000芯片，拍照效果出色'
        },
        {
          id: 3,
          name: '小米手机 Redmi Note 10',
          description: '性价比极高的智能手机，适合日常使用'
        }
      ]
    }
  },
  computed: {
    highlightedText() {
      return this.highlightKeyword(this.testText);
    }
  },
  methods: {
    // 转义正则表达式特殊字符
    escapeRegExp(string) {
      return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    },
    
    // 转义HTML特殊字符
    escapeHtml(text) {
      if (!text) return '';
      const map = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
      };
      return text.replace(/[&<>"']/g, m => map[m]);
    },
    
    // 高亮显示搜索关键字
    highlightKeyword(text) {
      if (!this.searchKeyword || !text) {
        return this.escapeHtml(text || '');
      }
      
      // 分割多个关键词（空格分隔）
      const keywords = this.searchKeyword.trim().split(/\s+/).filter(k => k.length > 0);
      
      if (keywords.length === 0) {
        return this.escapeHtml(text);
      }
      
      // 先转义HTML特殊字符
      let result = this.escapeHtml(text);
      
      // 对每个关键词进行高亮处理
      keywords.forEach(keyword => {
        try {
          // 转义正则表达式特殊字符
          const escapedKeyword = this.escapeRegExp(keyword);
          
          // 创建正则表达式，忽略大小写，全局匹配
          const regex = new RegExp(`(${escapedKeyword})`, 'gi');
          
          // 使用replace方法替换匹配的关键词，添加高亮标签
          result = result.replace(regex, '<span class="highlight">$1</span>');
        } catch (error) {
          console.error('高亮处理出错:', error);
        }
      });
      
      return result;
    },
    
    onSearchInput() {
      // 防抖处理，避免频繁更新
      clearTimeout(this.searchTimer);
      this.searchTimer = setTimeout(() => {
        // 触发高亮更新
        this.$forceUpdate();
      }, 300);
    }
  }
}
</script>

<style scoped>
.test-highlight {
  padding: 20px;
}

.search-box {
  margin-bottom: 20px;
}

.search-box input {
  width: 300px;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.test-content {
  margin-bottom: 30px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.test-content p {
  font-size: 16px;
  line-height: 1.6;
}

.product-item {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.product-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.product-desc {
  font-size: 14px;
  color: #666;
}

/* 高亮样式 */
.highlight {
  background-color: #ffeb3b !important;
  color: #333 !important;
  font-weight: bold !important;
  padding: 2px 4px !important;
  border-radius: 3px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}
</style>